<template>
  <div>
    <div class="baidu">百度</div>
    <input type="text" v-model="wz" v-on:input="dj" />
    <ul v-if="bool">
      <li
        :class="{ yanse: index == yanse1 }"
        @click="djs(value, index)"
        @keyup="jianpan1(index)"
        v-for="(value, index) in arr"
        :key="index"
      >
        <p>{{ value }}</p>
      </li>
    </ul>
  </div>
</template>
<style scoped>
* {
  font-size: 0.16rem;
}
.baidu {
  width: 2rem;
  overflow: hidden;
  font-size: 0.4rem;
  margin: 1rem auto;
}
.yanse {
  background: pink;
}
input {
  width: 4rem;
  height: 0.6rem;
  margin-left: 1rem;
}
li {
  list-style: none;
  border: 1px solid #000;
}
</style>
<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5, 6],
      wz: "",
      bool: false,
      yanse: false,
      yanse1: "s",
      obj: "",
    };
  },
  methods: {
    dj() {
      this.bool = true;

    },
    djs(value, index) {
      this.wz = value;

      this.yanse1 = index;
    },
    jianpan1(e,index) {
      if (e.keyCode == 13) {
        index++;
        this.yanse1 = index;
      }
    },
  },
};
</script>
